<template>
  <div>
    <div class="profit-top">
      <p class="profit-item">
        <span class="title">分成说明:</span>
        <span class="name">{{ priceInfo.profitSharingRemark || '--' }}</span>
      </p>
      <p class="profit-item">
        <span class="title">保底说明:</span>
        <span class="name">{{ priceInfo.guaranteeRemark || '--' }}</span>
      </p>
      <p class="profit-item">
        <span class="title">分成比例:</span>
        <span v-if="priceInfo.profitSharingRatio" class="name">{{ priceInfo.profitSharingRatio }}%</span>
        <span v-else class="name">--</span>
      </p>
      <p class="profit-item">
        <span class="title">保底金额:</span>
        <span v-if="priceInfo.guaranteePrice" class="name">{{ priceInfo.guaranteePrice }}元</span>
        <span v-else class="name">--</span>
      </p>
    </div>
    <div v-if="priceInfo.dynamicKey && priceInfo.dynamicKey.length > 0" class="profit-bottom">
      <div v-for="(item, index) in priceInfo.dynamicKey" :key="index+'-'+item.id" class="profit-item">
        <span class="title">{{ item.name }}:</span>
        <span v-if="item.options && item.options.length > 0" class="name">{{ formatValue(item) }}</span>
        <span v-else class="name">{{ item.value || '--' }}</span>
        <!-- <el-tooltip effect="dark" placement="top">
          <span slot="content" style="max-width: 200px">{{ item.name }}</span>
          <div class="dynamic-row">
            <div class="title dynamic-title">{{ item.name }}</div>
            <div class="dynamic-colon">:</div>
            <div v-if="item.options && item.options.length > 0" class="name">{{ formatValue(item) }}</div>
            <div v-else class="name">{{ item.value || '--' }}</div>
          </div>
        </el-tooltip> -->
      </div>
    </div>
  </div>
</template>

<script>
import { TableData } from '@/views/medium/mixin/mediumData';
export default {
  props: {
    activeTabs: {
      type: String,
      default: ''
    },
    priceInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      TableData
    };
  },
  methods: {
    formatValue(data) {
      let res = '--';
      if (data.options && data.options.length > 0) {
        data.options.forEach(item => {
          if (data.value === item.value) res = item.label;
        });
      }
      return res;
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
.profit-top {
  display: flex;
  flex-wrap: wrap;
}
.profit-bottom {
  display: flex;
  flex-wrap: wrap;
}
.profit-item {
  width: 50%;
  margin-top: 5px;
}
.title {
  font-size: 12px;
  color: #999;
}
.name {
  font-size: 12px;
  color: #333;
  word-break: break-all;
}
</style>
